<template>
	<el-dialog v-model="dialogVisible" append-to-body :show-close="false" :close-on-click-modal="false"
		class="flex-align" style="width: 100%;height: 100%;padding: 30px 24px;margin: 0;background: transparent;">
		<template #header>
			<el-card style="width: 100%;height: 100%;" body-style="padding: 0;" shadow="never">
				<template #header>
					<div class="flex-space-between">
						<div>
							<el-text style="font-size: 16px;">
								应收/应付明细
							</el-text>
						</div>
						<div>
							<el-button @click="closeDialog">取消</el-button>
							<!-- <el-button @click="closeDialog">
								保存并继续创建
								<el-icon style="margin-left: 4px;">
									<ArrowDown />
								</el-icon>
							</el-button> -->
							<el-button type="primary" @click="submitForm(vFormRef)">
								保存
							</el-button>
						</div>
					</div>
				</template>
				<el-scrollbar ref="scrollbarRef" @scroll="handleScroll"
					:style="`height: calc(100vh - 69px - ( 30px + 30px));`">
					<el-form :model="formData" :rules="rules" ref="vFormRef" label-position="top" label-width="50px"
						style="padding: 16px;">
						<el-form-item label="结算类型" prop="settlementType">
							<el-select @clear="selectClear('settlementType')" v-model="formData.settlementType"
								@change="(value:any)=>selectChange(value,'settlementType')" multiple
								ref="settlementType" clearable>
								<el-option v-for="(item, key) in settlementTypeOption" :key="key" :label="item?.label"
									:value="item?.value">
									<!--  -->
									<el-tag style="border: 0;" :color="item?.color" round effect="dark">
										{{ item?.label }}
									</el-tag>
									<!--  -->
								</el-option>
								<!--  -->
								<template #tag>
									<el-tag style="border: 0;" v-show="settlementTypeOption[settlementTypeIndex]?.value"
										:color="settlementTypeOption[settlementTypeIndex]?.color" round effect="dark">
										{{ settlementTypeOption[settlementTypeIndex]?.label }}
									</el-tag>
								</template>
							</el-select>
						</el-form-item>
						<el-row :gutter="16">
							<el-col :span="12">
								<el-form-item label="发生日期" prop="occurrenceDate">
									<el-date-picker placeholder="请选择" style="width:100%;" v-model="formData.occurrenceDate" type="date" />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="业务类型" prop="businessTypeId">
									<el-input class="my" readonly type="text" v-model="formData.businessTypeId"
										clearable>
										<template #prefix>
											<div>
												<el-check-tag
													:style="`color: ${businessTypeIndex===key?'#fff':''};${businessTypeIndex===key?`background: ${item.bg}`:''}`"
													v-for="(item,key) in businessTypeTags" :key="key"
													:checked="businessTypeIndex===key"
													@change="tagChange(key,'businessTypeId')">{{item.text}}</el-check-tag>
											</div>
										</template>
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="16">
							<el-col :span="12">
								<el-form-item label="客户" prop="customer">
									<el-select @clear="selectClear('customer')" v-model="formData.customer"
										@change="(value:any)=>selectChange(value,'customer')" multiple ref="customer"
										clearable>
										<el-option v-for="item in customerOption" :key="key" :label="item?.label"
											:value="item?.value">
											<!--  -->
											<div class="flex-align-center">
												<el-icon :color="item?.color">
													<component :is="item?.icon"></component>
												</el-icon>
												<!--  -->
												<el-text style="margin-left: 6px;">{{item?.label}}</el-text>
											</div>
										</el-option>
										<!--  -->
										<template #tag>
											<div class="flex-align-center">
												<el-icon :color="customerOption[customerIndex]?.color">
													<component :is="customerOption[customerIndex]?.icon">
													</component>
												</el-icon>
												<!--  -->
												<el-text size="small"
													style="margin-left: 6px;">{{customerOption[customerIndex]?.label}}</el-text>
											</div>
										</template>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="供应商" prop="supplier">
									<el-select @clear="selectClear('supplier')" v-model="formData.supplier"
										@change="(value:any)=>selectChange(value,'supplier')" multiple ref="supplier"
										clearable>
										<el-option v-for="item in supplierOption" :key="key" :label="item?.label"
											:value="item?.value">
											<!--  -->
											<div class="flex-align-center">
												<el-icon :color="item?.color">
													<component :is="item?.icon"></component>
												</el-icon>
												<!--  -->
												<el-text style="margin-left: 6px;">{{item?.label}}</el-text>
											</div>
										</el-option>
										<!--  -->
										<template #tag>
											<div class="flex-align-center">
												<el-icon :color="supplierOption[supplierIndex]?.color">
													<component :is="supplierOption[supplierIndex]?.icon">
													</component>
												</el-icon>
												<!--  -->
												<el-text size="small"
													style="margin-left: 6px;">{{supplierOption[supplierIndex]?.label}}</el-text>
											</div>
										</template>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="产品" prop="product">
							<el-select @clear="selectClear('product')" v-model="formData.product"
								@change="(value:any)=>selectChange(value,'product')" multiple ref="product" clearable>
								<el-option v-for="item in productOption" :key="key" :label="item?.label"
									:value="item?.value">
									<!--  -->
									<div class="flex-align-center">
										<el-icon :color="item?.color">
											<component :is="item?.icon"></component>
										</el-icon>
										<!--  -->
										<el-text style="margin-left: 6px;">{{item?.label}}</el-text>
									</div>
								</el-option>
								<!--  -->
								<template #tag>
									<div class="flex-align-center">
										<el-icon :color="productOption[productIndex]?.color">
											<component :is="productOption[productIndex]?.icon">
											</component>
										</el-icon>
										<!--  -->
										<el-text size="small"
											style="margin-left: 6px;">{{productOption[productIndex]?.label}}</el-text>
									</div>
								</template>
							</el-select>
						</el-form-item>
						<el-row :gutter="16">
							<el-col :span="12">
								<el-form-item label="数量" prop="quantity">
									<el-input type="number" placeholder="自动保存结果" disabled v-model="formData.quantity"
										clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="单价" prop="unitPrice">
									<el-input type="number" placeholder="自动保存结果" disabled
										v-model="formData.unitPrice" clearable></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="16">
							<el-col :span="8">
								<el-form-item label="应收金额" prop="receivableAmount">
									<el-input type="number" placeholder="自动保存结果" disabled
										v-model="formData.receivableAmount" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="已收总额" prop="receivedTotalAmount">
									<el-input type="number" placeholder="自动保存结果"
										v-model="formData.receivedTotalAmount" disabled clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="待收总额" prop="pendingCollectionTotalAmount">
									<el-input type="number" placeholder="自动保存结果"
										v-model="formData.pendingCollectionTotalAmount" disabled clearable></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="16">
							<el-col :span="8">
								<el-form-item label="应付总额" prop="payableTotalAmount">
									<el-input type="number" placeholder="自动保存结果"
										v-model="formData.payableTotalAmount" disabled clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="已付总额" prop="paidTotalAmount">
									<el-input type="number" placeholder="自动保存结果" disabled
										v-model="formData.paidTotalAmount" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="待付总额" prop="pendingPaymentTotalAmount">
									<el-input type="number" placeholder="自动保存结果"
										v-model="formData.pendingPaymentTotalAmount" disabled clearable></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="已生成对账单" prop="generatedStatement">
							<el-input type="text" placeholder="自动生成无需填写" readonly v-model="formData.generatedStatement"
								clearable></el-input>
						</el-form-item>
						<!-- <el-row :gutter="16">
							<el-col :span="12">
								<el-form-item label="出库明细" prop="outboundDetail">
									<el-select @clear="selectClear('outboundDetail')" v-model="formData.outboundDetail"
										@change="(value:any)=>selectChange(value,'outboundDetail')" multiple
										ref="outboundDetail" clearable>
										<el-option v-for="item in outboundDetailOption" :key="key" :label="item?.label"
											:value="item?.value">
											<div class="flex-align-center">
												<el-icon :color="item?.color">
													<component :is="item?.icon"></component>
												</el-icon>
												<el-text style="margin-left: 6px;">{{item?.label}}</el-text>
											</div>
										</el-option>
										<template #tag>
											<div class="flex-align-center">
												<el-icon :color="outboundDetailOption[outboundDetailIndex]?.color">
													<component :is="outboundDetailOption[outboundDetailIndex]?.icon">
													</component>
												</el-icon>
												<el-text size="small"
													style="margin-left: 6px;">{{outboundDetailOption[outboundDetailIndex]?.label}}</el-text>
											</div>
										</template>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="入库明细" prop="inboundDetail">
									<el-select @clear="selectClear('inboundDetail')" v-model="formData.inboundDetail"
										@change="(value:any)=>selectChange(value,'inboundDetail')" multiple
										ref="inboundDetail" clearable>
										<el-option v-for="item in inboundDetailOption" :key="key" :label="item?.label"
											:value="item?.value">
											<div class="flex-align-center">
												<el-icon :color="item?.color">
													<component :is="item?.icon"></component>
												</el-icon>
												<el-text style="margin-left: 6px;">{{item?.label}}</el-text>
											</div>
										</el-option>
										<template #tag>
											<div class="flex-align-center">
												<el-icon :color="inboundDetailOption[inboundDetailIndex]?.color">
													<component :is="inboundDetailOption[inboundDetailIndex]?.icon">
													</component>
												</el-icon>
												<el-text size="small"
													style="margin-left: 6px;">{{inboundDetailOption[inboundDetailIndex]?.label}}</el-text>
											</div>
										</template>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row> -->
						<el-row :gutter="16">
							<el-col :span="12">
								<el-form-item label="订单明细" prop="orderDetail">
									<el-select @clear="selectClear('orderDetail')" v-model="formData.orderDetail"
										@change="(value:any)=>selectChange(value,'orderDetail')" multiple
										ref="orderDetail" clearable>
										<el-option v-for="item in orderDetailOption" :key="key" :label="item?.label"
											:value="item?.value">
											<!--  -->
											<div class="flex-align-center">
												<el-icon :color="item?.color">
													<component :is="item?.icon"></component>
												</el-icon>
												<!--  -->
												<el-text style="margin-left: 6px;">{{item?.label}}</el-text>
											</div>
										</el-option>
										<!--  -->
										<template #tag>
											<div class="flex-align-center">
												<el-icon :color="orderDetailOption[orderDetailIndex]?.color">
													<component :is="orderDetailOption[orderDetailIndex]?.icon">
													</component>
												</el-icon>
												<!--  -->
												<el-text size="small"
													style="margin-left: 6px;">{{orderDetailOption[orderDetailIndex]?.label}}</el-text>
											</div>
										</template>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="采购明细" prop="purchaseDetail">
									<el-select @clear="selectClear('purchaseDetail')" v-model="formData.purchaseDetail"
										@change="(value:any)=>selectChange(value,'purchaseDetail')" multiple
										ref="purchaseDetail" clearable>
										<el-option v-for="item in purchaseDetailOption" :key="key" :label="item?.label"
											:value="item?.value">
											<!--  -->
											<div class="flex-align-center">
												<el-icon :color="item?.color">
													<component :is="item?.icon"></component>
												</el-icon>
												<!--  -->
												<el-text style="margin-left: 6px;">{{item?.label}}</el-text>
											</div>
										</el-option>
										<!--  -->
										<template #tag>
											<div class="flex-align-center">
												<el-icon :color="purchaseDetailOption[purchaseDetailIndex]?.color">
													<component :is="purchaseDetailOption[purchaseDetailIndex]?.icon">
													</component>
												</el-icon>
												<!--  -->
												<el-text size="small"
													style="margin-left: 6px;">{{purchaseDetailOption[purchaseDetailIndex]?.label}}</el-text>
											</div>
										</template>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="16">
							<el-col :span="12">
								<el-form-item label="销售订单" prop="salesOrder">
									<el-select @clear="selectClear('salesOrder')" v-model="formData.salesOrder"
										@change="(value:any)=>selectChange(value,'salesOrder')" multiple
										ref="salesOrder" clearable>
										<el-option v-for="item in salesOrderOption" :key="key" :label="item?.label"
											:value="item?.value">
											<!--  -->
											<div class="flex-align-center">
												<el-icon :color="item?.color">
													<component :is="item?.icon"></component>
												</el-icon>
												<!--  -->
												<el-text style="margin-left: 6px;">{{item?.label}}</el-text>
											</div>
										</el-option>
										<!--  -->
										<template #tag>
											<div class="flex-align-center">
												<el-icon :color="salesOrderOption[salesOrderIndex]?.color">
													<component :is="salesOrderOption[salesOrderIndex]?.icon">
													</component>
												</el-icon>
												<!--  -->
												<el-text size="small"
													style="margin-left: 6px;">{{salesOrderOption[salesOrderIndex]?.label}}</el-text>
											</div>
										</template>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="采购订单" prop="purchaseOrder">
									<el-select @clear="selectClear('purchaseOrder')" v-model="formData.purchaseOrder"
										@change="(value:any)=>selectChange(value,'purchaseOrder')" multiple
										ref="purchaseOrder" clearable>
										<el-option v-for="item in purchaseOrderOption" :key="key" :label="item?.label"
											:value="item?.value">
											<!--  -->
											<div class="flex-align-center">
												<el-icon :color="item?.color">
													<component :is="item?.icon"></component>
												</el-icon>
												<!--  -->
												<el-text style="margin-left: 6px;">{{item?.label}}</el-text>
											</div>
										</el-option>
										<!--  -->
										<template #tag>
											<div class="flex-align-center">
												<el-icon :color="purchaseOrderOption[purchaseOrderIndex]?.color">
													<component :is="purchaseOrderOption[purchaseOrderIndex]?.icon">
													</component>
												</el-icon>
												<!--  -->
												<el-text size="small"
													style="margin-left: 6px;">{{purchaseOrderOption[purchaseOrderIndex]?.label}}</el-text>
											</div>
										</template>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-scrollbar>
				<!--  -->
			</el-card>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { useRoute, useRouter } from 'vue-router';
	import request from '../../../utils/request';
	import { Document,UserFilled, CopyDocument, List, GoodsFilled, ShoppingBag, Grid } from '@element-plus/icons-vue';
	import { mergeObjects, formatNumber } from '../../../utils';
	import { useSelect } from '../../../utils/mixins';
	import { ElMessage, FormInstance } from 'element-plus';
	import { getShipments } from '../../../api/shipmentAPI';
	const emits = defineEmits(['update']);
	const { handSelectChange } = useSelect();
	const router = useRouter();
	const route = useRoute();
	const vFormRef = ref(null);
	const loading = ref(false);

	// 表单
	const formData = ref({
		settlementTypeId: null,//结算类型
		settlementType: [],
		occurrenceDate: null,//发生日期
		businessTypeId: null,//业务类型
		businessType: [],
		customerId: null,//客户
		customer: [],
		supplierId: null,//供应商
		supplier: [],
		productId: null,//商品
		product: [],
		quantity: null,//数量
		unitPrice: null,//单价
		receivableAmount: null,//应收金额
		receivedTotalAmount: null,//已收总额
		pendingCollectionTotalAmount: null,//待收总额
		payableTotalAmount: null,//应付总额
		paidTotalAmount: null,//已付总额
		pendingPaymentTotalAmount: null,//待付总额
		generatedStatement: null,//已生成对账单
		outboundDetailId: null,//出库明细
		outboundDetail: [],
		inboundDetailId: null,//入库明细
		inboundDetail: [],
		orderDetailId: null,//订单明细
		orderDetail: [],
		purchaseDetailId: null,//采购明细
		purchaseDetail: [],
		salesOrderId: null,//销售订单
		salesOrder: [],
		purchaseOrderId: null,//采购订单
		purchaseOrder: []
	});
	//验证
	const rules = reactive({
		settlementType: [{ required: true, message: '不能为空！', trigger: ['blur', 'change'] }],//结算类型
		occurrenceDate: [{ required: true, message: '不能为空！', trigger: ['blur', 'change'] }],//发生日期
		businessTypeId: [{ required: true, message: '不能为空！', trigger: ['blur', 'change'] }],//业务类型
		customer: [],//客户
		supplier: [],//供应商
		product: [{ required: true, message: '不能为空！', trigger: ['blur', 'change'] }],//商品
		quantity: [],//数量
		unitPrice: [],//单价
		receivableAmount: [],//应收金额
		receivedTotalAmount: [],//已收总额
		pendingCollectionTotalAmount: [],//待收总额
		payableTotalAmount: [],//应付总额
		paidTotalAmount: [],//已付总额
		pendingPaymentTotalAmount: [],//待付总额
		generatedStatement: [],//已生成对账单
		outboundDetailId: [],//出库明细
		inboundDetailId: [],//入库明细
		orderDetailId: [],//订单明细
		purchaseDetailId: [],//采购明细
		salesOrderId: [],//销售订单
		purchaseOrderId: [],//采购订单
	});
	const pageData = ref({
		pageNum: 1,
		pageSize: 1000,
		total: 0,
		pages: 0,
	});
	//结算类型
	const settlementTypeOption = ref([]);
	const settlementTypeIndex = ref(-1);
	const settlementType = ref(null);
	//业务类型 tags
	const businessTypeTags = ref([]);
	const businessTypeIndex = ref(-1);
	//客户
	const customerOption = ref([]);
	const customerIndex = ref(-1);
	const customer = ref(null);
	//供应商
	const supplierOption = ref([]);
	const supplierIndex = ref(-1);
	const supplier = ref(null);
	//商品
	const productOption = ref([]);
	const productIndex = ref(-1);
	const product = ref(null);
	//出库明细
	const outboundDetailOption = ref([]);
	const outboundDetailIndex = ref(-1);
	const outboundDetail = ref(null);
	//入库明细
	const inboundDetailOption = ref([]);
	const inboundDetailIndex = ref(-1);
	const inboundDetail = ref(null);
	//订单明细
	const orderDetailOption = ref([]);
	const orderDetailIndex = ref(-1);
	const orderDetail = ref(null);
	//采购明细
	const purchaseDetailOption = ref([]);
	const purchaseDetailIndex = ref(-1);
	const purchaseDetail = ref(null);
	//销售订单
	const salesOrderOption = ref([]);
	const salesOrderIndex = ref(-1);
	const salesOrder = ref(null);
	//采购订单
	const purchaseOrderOption = ref([]);
	const purchaseOrderIndex = ref(-1);
	const purchaseOrder = ref(null);
	//
	const dialogVisible = ref(false);
	/**
	 * 打开弹出层
	 */
	const openDialog = () => {
		dialogVisible.value = true;
		setTimeout(async () => {
			const result = await getPageId();
			//
			if (result) {
				getSettlementTypeList();
				getBusinessTypeList();
				getCustomerList();
				getSupplierList();
				getProductList();
			}
		}, 10);
	}
	/**
	 * 关闭弹出层
	 */
	const closeDialog = () => {
		dialogVisible.value = false;
		vFormRef.value.resetFields();
		//清空url参数
		router.push({ query: {} });
	}
	//获取当前页面的数据
	const getPageId = async () => {
		if (!route.query.id) {
			return true;
		}
		//
		const result = await request({
			url: '/SalesReceipt/selectRId',
			params: {
				receivablePayableDetailId: route.query.id
			},
		});
		//
		console.log('getPageId --->', result);
		//
		formData.value = { ...result.data.t };
		//
		return true;
	}
	//tag改变
	const tagChange = (index : number, type : string) => {
		if (type === 'businessTypeId') {
			if (businessTypeIndex.value === index) {
				formData.value[type] = null;
				businessTypeIndex.value = -1;
				return;
			}
			businessTypeIndex.value = index;
			formData.value[type] = businessTypeTags.value[index].value;
		}
	}
	//改变
	const selectChange = (value : Array<any>, type : string, key : number) => {
		//所有下拉框的配置列表
		const typeList = [{
			type: 'settlementType', //哪一个下拉框，根据ref
			option: settlementTypeOption, //下拉列表选项
			indexVar: settlementTypeIndex, //当前选中项
			idVar: 'settlementTypeId', //当前id值
			blurRef: settlementType, //ref
		}, {
			type: 'customer', //哪一个下拉框，根据ref
			option: customerOption, //下拉列表选项
			indexVar: customerIndex, //当前选中项
			idVar: 'customerId', //当前id值
			blurRef: customer, //ref
			fun: getCustomerById
		}, {
			type: 'supplier', //哪一个下拉框，根据ref
			option: supplierOption, //下拉列表选项
			indexVar: supplierIndex, //当前选中项
			idVar: 'supplierId', //当前id值
			blurRef: supplier, //ref
			fun: getSupplierById
		}, {
			type: 'product', //哪一个下拉框，根据ref
			option: productOption, //下拉列表选项
			indexVar: productIndex, //当前选中项
			idVar: 'productId', //当前id值
			blurRef: product, //ref
		}, {
			type: 'outboundDetail', //哪一个下拉框，根据ref
			option: outboundDetailOption, //下拉列表选项
			indexVar: outboundDetailIndex, //当前选中项
			idVar: 'outboundDetailId', //当前id值
			blurRef: outboundDetail, //ref
		}, {
			type: 'inboundDetail', //哪一个下拉框，根据ref
			option: inboundDetailOption, //下拉列表选项
			indexVar: inboundDetailIndex, //当前选中项
			idVar: 'inboundDetailId', //当前id值
			blurRef: inboundDetail, //ref
		}, {
			type: 'orderDetail', //哪一个下拉框，根据ref
			option: orderDetailOption, //下拉列表选项
			indexVar: orderDetailIndex, //当前选中项
			idVar: 'orderDetailId', //当前id值
			blurRef: orderDetail, //ref
		}, {
			type: 'purchaseDetail', //哪一个下拉框，根据ref
			option: purchaseDetailOption, //下拉列表选项
			indexVar: purchaseDetailIndex, //当前选中项
			idVar: 'purchaseDetailId', //当前id值
			blurRef: purchaseDetail, //ref
		}, {
			type: 'salesOrder', //哪一个下拉框，根据ref
			option: salesOrderOption, //下拉列表选项
			indexVar: salesOrderIndex, //当前选中项
			idVar: 'salesOrderId', //当前id值
			blurRef: salesOrder, //ref
		}, {
			type: 'purchaseOrder', //哪一个下拉框，根据ref
			option: purchaseOrderOption, //下拉列表选项
			indexVar: purchaseOrderIndex, //当前选中项
			idVar: 'purchaseOrderId', //当前id值
			blurRef: purchaseOrder, //ref
		},];
		//
		handSelectChange(formData, typeList, value, type, key);
	}
	//获取结算类型
	const getSettlementTypeList = async () => {
		const data = await getShipments('settlement_type');
		//
		console.log('getSettlementTypeList --->', data);
		settlementTypeOption.value = [];
		data.forEach((item : any, key : number) => {
			settlementTypeOption.value.push(item);
			//
			if (formData.value.settlementTypeId === item.value) {
				formData.value.settlementType = [item.value];
				settlementTypeIndex.value = key;
			}
		});
	}
	//获取业务类型
	const getBusinessTypeList = async () => {
		const data = await getShipments('business_type', 'tag');
		//
		console.log('getSettlementTypeList --->', data);
		businessTypeTags.value = [];
		data.forEach((item : any, key : number) => {
			businessTypeTags.value.push(item);
			//
			if (formData.value.businessTypeId === item.value) {
				businessTypeIndex.value = key;
			}
		});
	}
	//获取客户
	const getCustomerList = async () => {
		const result = await request({
			url: '/SalesReceipt/selectCustomer',
		});
		console.log('getCustomerList --->', result);
		customerOption.value = [];
		result.data.t.forEach((item : any, key : number) => {
			customerOption.value.push({
				label: `${item.customerName}（${item.customerRating}）${item.billingMethod}`,
				value: item.customerId,
				icon: UserFilled,
				color: '#82b51b'
			});
			if (formData.value.customerId === item.customerId) {
				formData.value.customer = [item.customerId];
				customerIndex.value = key;
				//
				getCustomerById(item.customerId);
			}
		});
	}
	//获取供应商
	const getSupplierList = async () => {
		const result = await request({
			url: '/SalesReceipt/selectProcuredSupplier'
		});
		//
		console.log('getSupplierList --->', result);
		supplierOption.value = [];
		result.data.t.forEach((item : any, key : number) => {
			supplierOption.value.push({
				label: `${item.supplierShortName}`,
				value: item.supplierId,
				icon: UserFilled,
				color: '#fa9e00'
			});
			if (formData.value.supplierId === item.supplierId) {
				formData.value.supplier = [item.supplierId];
				supplierIndex.value = key;
				//
				getSupplierById(item.supplierId);
			}
		});
	}
	//获取所有商品
	const getProductList = async () => {
		const result = await request({
			url: '/SalesReceipt/selectProduct',
		});
		//
		console.log('getProductList --->', result);
		//
		productOption.value = [];
		result.data.t.forEach((item : any,key:number) => {
			productOption.value.push({
				label: `${item?.productName}${item?.model} | 在库${item?.currentInventory}件`,
				value: item?.productId,
				icon: GoodsFilled,
				color: '#5283ff'
			});
			if (formData.value.productId === item.productId) {
				formData.value.product = [item.productId];
				productIndex.value = key;
			}
		});
	}
	//根据客户id获取 出库明细、订单明细、销售订单
	const getCustomerById = async (customerId ?: number) => {
		const result = await request({
			url: '/SalesReceipt/salesOrdersCId',
			params: { customerId }
		});
		console.log('getCustomerById --->', result);
		//销售订单
		salesOrderOption.value = [];
		result.data.t.forEach((item : any, key : number) => {
			salesOrderOption.value.push({
				label: `${item.orderNumber}_${formatNumber(item.orderTotalAmount, '元')}`,
				value: item.orderId,
				icon: List,
				color: '#42b33e'
			});
			if (formData.value.salesOrderId === item.orderId) {
				formData.value.salesOrder = [item.orderId];
				salesOrderIndex.value = key;
			}
			//订单明细
			orderDetailOption.value = [];
			item.orderDetail.forEach((item1 : any, key1 : number) => {
				orderDetailOption.value.push({
					label: `${item.orderNumber}`,
					value: item1.orderDetailId,
					icon: Document,
					color: '#82b51b'
				});
				if (formData.value.orderDetailId === item1.orderDetailId) {
					formData.value.orderDetail = [item1.orderDetailId];
					orderDetailIndex.value = key1;
				}
				//出库明细
				outboundDetailOption.value = [];
				item1.outboundDetails.forEach((item2 : any, key2 : number) => {
					outboundDetailOption.value.push({
						label: `${item2.outboundNumber}_${item1.products}`,
						value: item2.outboundDetailId,
						icon: CopyDocument,
						color: '#82b51b'
					});
					if (formData.value.outboundDetailId === item2.outboundDetailId) {
						formData.value.outboundDetail = [item2.outboundDetailId];
						outboundDetailIndex.value = key2;
					}
				});
			});
		});
	}
	//根据供应商id获取 入库明细、采购明细、采购订单
	const getSupplierById = async (supplierId ?: number) => {
		const result = await request({
			url: '/SalesReceipt/ordersSId',
			params: { supplierId }
		});
		//
		console.log('getSupplierById --->', result);
		//采购订单
		purchaseOrderOption.value = [];
		result.data.t.forEach((item : any, key : number) => {
			purchaseOrderOption.value.push({
				label: `${item.purchaseOrderNumber}_${formatNumber(item.totalAmount,'元')}`,
				value: item.purchaseOrderId,
				icon: CopyDocument,
				color: '#82b51b'
			});
			if (formData.value.purchaseOrderId === item.purchaseOrderId) {
				formData.value.purchaseOrder = [item.purchaseOrderId];
				purchaseOrderIndex.value = key;
			}
			//采购明细
			purchaseDetailOption.value = [];
			item.purchaseDetails.forEach((item1 : any, key1 : number) => {
				purchaseDetailOption.value.push({
					label: `${item.purchaseOrderNumber}`,
					value: item1.purchaseDetailId,
					icon: ShoppingBag,
					color: '#fa9e00'
				});
				if (formData.value.purchaseDetailId === item.purchaseDetailId) {
					formData.value.purchaseDetail = [item.purchaseDetailId];
					purchaseDetailIndex.value = key1;
				}
				//入库明细
				inboundDetailOption.value = [];
				item1.inboundDetails.forEach((item2 : any, key2 : number) => {
					inboundDetailOption.value.push({
						label: `${item2.inboundDetailId}`,
						value: item2.inboundDetailId,
						icon: Grid,
						color: '#42b33e'
					});
					if (formData.value.inboundDetailId === item2.inboundDetailId) {
						formData.value.inboundDetail = [item2.inboundDetailId];
						inboundDetailIndex.value = key2;
					}
				});
			});
		});
	}
	//提交表单
	const submitForm = async (formEl : FormInstance | undefined) => {
		if (!formEl) return;
		await formEl.validate(async (valid, fields) => {
			if (valid) {
				console.log('submitForm ---> ', formData.value);
				const data = { ...formData.value };
				delete data.businessType;
				delete data.customer;
				delete data.inboundDetail;
				delete data.orderDetail;
				delete data.outboundDetail;
				delete data.product;
				delete data.purchaseDetail;
				delete data.purchaseOrder;
				delete data.salesOrder;
				delete data.settlementType;
				delete data.supplier;
				let type = '';
				if (!route.query.id) {
					type = '/saveReceivablePayable';
				} else {
					type = '/updateReceivablePayable';
				}
				//
				const result = await request({
					url: '/SalesReceipt' + type,
					data: data,
					method: 'post'
				});
				//
				console.log('submitForm--->', result);
				//
				if (result.data.code === 200) {
					ElMessage.success({
						message: '操作成功！'
					});
				} else {
					ElMessage.error({
						message: result.data.msg
					});
				}
				// //
				setTimeout(() => {
					closeDialog();
					emits('update');
				}, 1);
			} else {
				//
				console.log('error submit!', fields);
			}
		});
	}
	defineExpose({
		openDialog
	});
</script>
<style>
	@import '../../../assets/css/my-form-item.css';

	.form-item-bg {
		background-color: #bfdfff;
	}

	.form-item-bg1 {
		background-color: #a5f2e5;
	}

	.my.el-input .el-input__inner {
		opacity: 0;
	}

	/*  */
	.avatar-uploader {
		width: 178px;
		height: 178px;
	}

	.avatar-uploader .avatar {
		width: 100%;
		height: 100%;
	}

	.avatar-uploader .el-upload {
		width: 100%;
		height: 100%;
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}

	.el-scrollbar__view {
		display: block !important;
	}

	/*  */
</style>

<style scoped lang="scss">
	@import '../../../assets/css/index.scss';
</style>